<template>

    <div class="roomInfo" align="right">
      <div>
        <div>
          开始日期：
          <el-date-picker v-model="start" type="date" placeholder="选择日期"></el-date-picker>
          结束日期：
          <el-date-picker v-model="end" type="date" placeholder="选择日期"></el-date-picker>
          全文搜索：
          <el-input v-model="queryTitle" type="text" style="width:300px" prefix-icon="el-icon-search" placeholder="请输入关键字"></el-input>
          <el-button type="primary" size="small" v-on:click="getRooms" icon="el-icon-search">搜  索</el-button>
          <el-button type="primary" size="small" v-on:click="add" icon="el-icon-circle-plus-outline">添  加</el-button>
        </div>
        <div class="table">
          <el-table v-bind:data="rooms" highlight-current-row border >
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="font" label="规格"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="subway" label="地铁信息"></el-table-column>
            <el-table-column prop="addr" label="地址"></el-table-column>
            <el-table-column prop="url" label="房子信息详情url"></el-table-column>
            <el-table-column label="头像" width="200">
              <template slot-scope="scope">
                <img :src="scope.row.img" width="200" height="200" class="head_pic"/>
              </template>
            </el-table-column>
            <el-table-column prop="note" label="说明"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" v-on:click="edit(scope.row.id)" icon="el-icon-edit">编 辑</el-button>
                <el-button type="text" size="small" v-on:click="del(scope.row.id)" icon="el-icon-delete">删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pager">
          <el-pagination background v-bind:current-Page="pageIndex" v-bind:page-size="pageSize" :total="total"
                         layout="total,sizes,prev,pager,next,jumper" v-bind:page-sizes="pageSizes"
                         v-on:size-change="sizeChange" v-on:current-change="pageIndexChange">

          </el-pagination>
        </div>
      </div>
    </div>

</template>

<style></style>

<script>

export default {
  name: 'RoomInfo',
  data () {
    let currentDate = new Date()
    return {
      msg: 'vue模板页',
      start: new Date(currentDate.getFullYear(), currentDate.getMonth() - 3, 1),
      end: new Date(),
      queryTitle: '',
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      rooms: [
        {id: '1', title: '1', font: '1', price: '1', subway: '1', addr: '1', url: '1', img: '1', note: '1'}
      ],
      pageSizes: [10, 20, 50, 100]
    }
  },
  methods: {
    getRooms: function () {
      var params = new URLSearchParams()
      // params.append('urlName', this.urlName)
      var self = this
      this.$ajax({
        method: 'get',
        url: 'http://localhost:8889/' + this.pageIndex + '/' + this.pageSize + '/' + this.queryTitle,
        data: params
      }).then(function (response) {
        // 成功回调
        // alert(response.status)
        self.rooms = response.data.content
        // alert(response.data.totalElements)
        self.total = response.data.totalElements
      }, function (response) {
        alert(response.status)
      })
    },

    fetchData: function () {
      this.manifests = []
      this.$http.get('http://localhost:1500/api/Manifests/paged', {
        params: {
          start: this.start.format('yyyy-MM-dd'),
          end: this.end.format('yyyy-MM-dd'),
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      })
        .then(response => {
          this.total = response.body.count
          this.manifests = response.body.data
        })
        .catch(response => this.$alert(response.body.Message, '日消费明细', { type: 'error' }))
    },
    add: function () {
      this.title = '添加消费明细'
      this.manifest = {
        ID: '1',
        Date: new Date(),
        Cost: '',
        Remark: ''
      }
      this.isAdd = true
      this.showOperateManifest = true
    },
    save: function () {
      this.$refs.formManifest.validate(valid => {
        if (valid) {
          let operateManifest = JSON.parse(JSON.stringify(this.manifest))
          operateManifest.Date = this.manifest.Date.format('yyyy-MM-dd')
          if (this.isAdd) {
            this.$http.post('http://localhost:1500/api/Manifests', operateManifest)
              .then(() => {
                this.manifests.push(operateManifest)
                this.showOperateManifest = false
                // bus.$emit('manifestChanged')
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              })
              .catch(err => {
                // console.log(err);
                this.$alert(err.body.Message, '添加日消费明细', { type: 'error' })
              })
          } else {
            this.$http.put('http://localhost:1500/api/Manifests', operateManifest)
              .then(response => {
                let updatedManifest = this.manifests.find(x => x.ID === this.manifest.ID)
                updatedManifest.Date = operateManifest.Date
                updatedManifest.Cost = operateManifest.Cost
                updatedManifest.Remark = operateManifest.Remark
                this.showOperateManifest = false
                // bus.$emit('manifestChanged')
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              })
              .catch(err => {
                // console.log(err);
                this.$alert(err.body.Message, '修改消费明细', { type: 'error' })
              })
          }
        } else {
          return false
        }
      })
    },
    cancel: function () {
      this.manifest = {}
      this.showOperateManifest = false
    },
    edit: function (ID) {
      let currentManifest = this.manifests.find(x => x.ID === ID)
      this.manifest = JSON.parse(JSON.stringify(currentManifest))
      this.manifest.Date = new Date(this.manifest.Date)
      this.title = '编辑消费明细'
      this.isAdd = false
      this.showOperateManifest = true
    },
    del: function (ID) {
      this.$confirm('是否删除？', '警告', { type: 'warning' })
        .then(() => {
          this.$http.delete('http://localhost:1500/api/Manifests/' + ID)
            .then(response => {
              let index = this.manifests.findIndex(x => x.ID === ID)
              this.manifests.splice(index, 1)
              // bus.$emit('manifestChanged')
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            })
            .catch(err => {
              this.$alert(err.body.Message, '删除消费明细', { type: 'error' })
              // console.log(err);
            })
        })
    },
    dialogClosed: function () {
      this.$refs.formManifest.resetFields()
    },
    sizeChange: function (pageSize) {
      this.pageSize = pageSize
      this.getRooms()
    },
    pageIndexChange: function (pageIndex) {
      this.pageIndex = pageIndex
      this.getRooms()
    }
  }
}

</script>
